<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>科目信息</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}

			.head {
				background-color: #4d4d4d;
				width: 100%;
				height: 54px;
			}

			.head1 {
				display: flex;
				margin-left: 76.3%;
				padding-top: 15px;
				overflow: hidden;
				width: 350px;
			}

			.head1 img {
				width: 30px;
				height: 30px;
				margin-top: 2px;
			}

			.head1 span {
				line-height: 30px;
				margin-left: 5px;
				color: white;
			}

			#but1 {
				width: 20%;
				height: 33.7px;
				border-radius: 4px;
				margin-left: 9px;
				background-color: #5cb85c;
				border: none;
				color: white;
				font-size: 14.3px;
			}

			#but2 {
				width: 20%;
				height: 33.7px;
				margin-left: 9px;
				background-color: #d9534f;
				border: none;
				color: white;
				font-size: 14.3px;
			}

			#but1:hover {
				background-color: #449d44;
			}

			#but2:hover {
				background-color: #c9302c;
			}

			.mybody {
				background-color: #f3f3f3;
				width: 100%;
				height: 2000px;
				display: flex;
			}

			.mybody-left {
				width: 260px;
				height: 2000px;
				background-color: #202020;
			}

			.mybody-leftOne {
				height: 76.4px;
				display: flex;
				border: 1px solid;
				border-color: #2e2e2f;
				border-top: none;
				border-left: none;
			}

			.mybody-leftOne img {
				height: 40px;
				margin-top: 21px;
				margin-left: 10px;
			}

			.mybody-leftOne span {
				color: white;
				font-size: 14px;
				margin-left: 10px;
				line-height: 96.5px;
			}

			.mybody-leftTwo {
				height: 76.4px;
				display: flex;
				
				border: 1px solid;
				border-color: #2e2e2f;
				border-top: none;
				border-left: none;
			}

			.mybody-leftTwo img {
				height: 40px;
				margin-top: 21px;
				margin-left: 10px;
			}

			.mybody-leftTwo span {
				color: white;
				font-size: 14px;
				margin-left: 10px;
				line-height: 96.5px;
			}

			.mybody-leftThree {
				height: 76.4px;
				display: flex;
				border: 1px solid;
				border-color: #2e2e2f;
				border-top: none;
				border-left: none;
				background-color: #c90000;
			}

			.mybody-leftThree img {
				height: 40px;
				margin-top: 21px;
				margin-left: 10px;
			}

			.mybody-leftThree span {
				color: white;
				font-size: 14px;
				margin-left: 10px;
				line-height: 96.5px;
			}

			.mybody-leftOne:hover {
				background-color: #000000;
			}

			.mybody-leftTwo:hover {
				background-color: #000000;
			}

			.mybody-right {
				width: 80.75%;
				height: 1950px;
				background-color: white;
				margin-left: 30px;
				margin-top: 25px;
			}

			.mybody-head {
				color: red;
				font-size: 30px;
				margin-left: 10px;
				margin-top: 26px;
				text-shadow:1px 1px 0px #000000;
			}

			.mybody-head hr {
				width: 99%;
				margin-left: -1px;
				opacity: 0.2;
				margin-top: 27px;
			}

			.body_1 {
				margin-left: 0.8%;
				border-radius: 4px;
				width: 98.2%;
				border: 1px solid;
				border-color: gainsboro;
				margin-top: 18px;
			}

			.body_2 {
				width: 100%;
				border-radius: 4px 4px 0px 0px;
				border: 1px solid;
				border-color: gainsboro;
				height: 54px;
				border-top: none;
				border-left: none;
				border-right: none;
				background-color: #f5f5f5;
			}

			#but-zheng {
				width: 138px;
				height: 34px;
				background-color: #428bca;
				border: none;
				border-radius: 4px;
				color: white;
				font-size: 14px;
				margin-left: 1.1%;
				margin-top: 10px;

			}

			#but-zheng:hover {
				background-color: #3071a9;
			}

			.body_3 {
				display: flex;
				width: 100%;
				margin-top: 15px;
				margin-left: 1.15%;
				overflow: hidden;
			}

			.body_3 select {
				width: 64px;
				height: 25px;
			}

			.body_3 span {
				font-size: 14px;
				line-height: 25px;
				margin-left: 0.3%;
			}

			.body_3 a {
				font-size: 14px;
				line-height: 25px;
				margin-left: 45.5%;
			}

			.body_3 input {
				margin-left: 0.6%;
				border: 2px solid;
				border-radius: 4px;
			}

			.body_4 {}

			td {
				text-align: center;
				font-size: 17px;
				width: 150px;
			}

			tr {
				height: 35px;
			}

			tr:hover {
				background-color: #f5f5f5;
			}

			#mytable {
				border-color: #f5f5f5;
				margin-top: 10px;
			}

			#mytable1 {
				border-color: #f5f5f5;
				margin-top: 10px;
			}

			#but4 {
				width: 40px;
				height: 25px;
				border-radius: 4px;
				background-color: #3071a9;
				border: none;
				color: white;
			}

			#but5 {
				width: 40px;
				height: 25px;
				border-radius: 4px;
				background-color: #d9534f;
				border: none;
				color: white;
				margin-left: 5px;
			}

			.body_5 {
				margin-top: 20px;
				margin-left: 10px;
			}

			.body_6 {
				margin-left: 50%;
				margin-top: 40px;
			}

			.body_6 button {

				color: #428bca;
				height: 30px;
				border-radius: 8px;
				border: 1px solid;
				background-color: white;
				border-color: gainsboro;

			}

			/* .body_6 button:hover {
				background-color: #428bca;
				color: white;
			} */
		</style>

	</head>
	<body>
		<script src="js/header.js" type="text/javascript" charset="utf-8"></script>
		<div class="mybody">
			<div class="mybody-left">
				<div class="mybody-leftOne">
					<img src="img/ia_100000001.png">
					<span>学生信息管理</span>
				</div>
				<div class="mybody-leftTwo">
					<img src="img/ia_100000002.png">
					<span>学生成绩管理</span>
				</div>
				<div class="mybody-leftThree">
					<img src="img/ia_100000003.png">
					<span>科目管理</span>
				</div>
			</div>
			<div class="mybody-right">
				<div class="mybody-head">
					科目信息
					<hr>
				</div>
				<div class="body_1">
					<div class="body_2">
						<button type="button" id="but-zheng">增加科目信息</button>
					</div>
					<div class="body_3">
						<select id="selectss" onchange="ted()">
							<option value="">5</option>
							<option value="">10</option>
							<option value="">25</option>
							<option value="">50</option>
						</select>
						<span>每页显示记录数</span>
						<a>查找:</a>
						<input type="text" name="" id="" value="" />
					</div>
					<div class="body_4">
						<table id='mytable' align='center' width="98%" border='1'>
							<tr>
								<td>科目</td>
								<td>任课老师</td>
								<td>科目简介</td>
								<td>操作</td>
							</tr>
							<!-- <tr>
								<td>bbb</td>
								<td>aaa</td>
								<td>aaa</td>
								<td>
									<button type="button" id="but4">编辑</button>
									<button type="button" id="but5">删除</button>
								</td>
							</tr> -->

						</table>
					</div>
					<div class="body_5">
						<!-- <span>总记录数:20</span> -->
					</div>
					<div class="body_6">
						<button type="button" id="butt1">首页</button>
						<button type="button" id="butt2">上一页</button>
						<span id="sex"></span>
						<!-- <button type="button" id="butt3">1</button>
						<button type="button" id="butt4">2</button>
						<button type="button" id="butt5">3</button>
						<button type="button" id="butt6">4</button> -->
						<button type="button" id="butt7">下一页</button>
						<button type="button" id="butt8">尾页</button>
					</div>
					<div class="" style="height: 15px;">

					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/科目信息.js" type="text/javascript" charset="utf-8"></script>
</html>
